<template>
	<view class="zywd">
		<navbar></navbar>
		<view class="zywd-top">
			<image src="../../../static/会员背.png" mode=""></image>
			<uni-nav-bar :border="false" left-icon="left" :title="title" color="white" background-color="transparent"  @clickLeft="back" />
			<uni-search-bar v-model="searchvalue" placeholder="搜一搜" :radius="100" cancelButton="none" bgColor="rgba(213, 225, 237, 0.5)" textColor="#918781" @confirm="confim"></uni-search-bar>
		</view>
		<view class="tab-container">
			<van-tabs :active="active" @change="onChange" class="scrollable-tabs" line-width="25">
				<template #nav-right>
					<view class="tab-right" @click="open">
						<image src="../../../static/分类查看.png" mode=""></image>
					</view>
				</template>
			  <van-tab :title="item.text" v-for="item in list" :key="item.value" :name="item.text">
					<view class="Inv1" v-for="i in zywdList" :key="i.id" @click="contentHandler(i)">
						<view class="Inv1-vw">
							<view class="Inv1-vw-left">
								<view class="">{{i.type_fastname}}</view>
								<text class="text3">{{i.type_name}}</text>
							</view>
							<text class="text4">{{i.content}}</text>
							<view class="Inv1-view">
								<view class="" style="margin-right: 74rpx;"><image src="../../static/眼睛@1x.png" style="width: 24rpx; height: 24rpx; margin-right: 10rpx;"></image>{{i.visit}}</view>
								<view class=""><image src="../../static/点赞@1x.png" style="width: 24rpx; height: 24rpx; margin-right: 10rpx;"></image>{{i.like}}</view>
							</view>
						</view>
					</view>
				</van-tab>
			</van-tabs>
		</view>
		<van-popup
		  :show="show"
			round
		  closeable
		  position="bottom"
		  custom-style="height: 30%"
		  @close="onClose">
			<view class="popup-view">
				<text>选择法律分类</text>
				<view class="popup-check">
					<uni-data-checkbox mode="tag" v-model="radio3" :localdata="list" @change="changehandler"></uni-data-checkbox>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import { getType, getquestionsList } from '../../../utils/utils';
	export default {
		data() {
			return {
				title: '专业问答', // 默认标题
				active: 0, //标签页默认
				show: false, // 弹出层是否隐藏
				radio3: '', // 复选框选中数据
				list: [], // 初始擅长类型数组
				page: 1, // 初始页数
				zywdList:[], // 专业问答初始数组
				searchvalue: '', // 搜索栏数据
			}
		},
		onLoad() {
			// 获取擅长类型
			getType((res) => {
				// console.log(res.data.data);
				const list = res.data.data;
				const modifiedData = list.map(item => {
				  const newItem = {}; 
				  newItem.value = item.id; 
				  newItem.text = item.name; 
					newItem.add_time = item.add_time
					newItem.is_show = item.is_show
				  return newItem;
				});
				let arr = {
					value: 0,
					text: '热门',
					add_time: 127,
					is_show: 1
				}
				modifiedData.unshift(arr)
				this.list = modifiedData
				console.log('list',this.list);
			})
			// 获取专业问答列表
			let arr = {
				cid: '0',
				is_hot: '1',
				page: String(this.page),
				keyword: ''
			}
			getquestionsList(arr, (res) => {
				console.log('专业问答列表', res);
				this.zywdList = res.data.list.data
				console.log('123',this.zywdList);
			})
		},
		methods: {
			// 后退
			back () {
				uni.navigateBack(-1)
			},
			// 标签页切换
			onChange (e) {
				console.log(e.detail);
				// this.$nextTick(() => {
				// 	let arr = e.detail
				// 	this.title = arr.title
				// })
				const value = this.list[e.detail.index];
				let arr = {
					cid: String(value.value),
					is_hot: String(value.value),
					page: String(this.page),
					keyword: ''
				}
				if (value.cid == 0) {
					arr.is_hot = String(1)
					getquestionsList(arr, (res) => {
						console.log('切换了', res.data.list);
						this.zywdList =  res.data.list.data
						this.active = e.detail.index
					})
				} else {
					arr.is_hot = String(value.value)
					getquestionsList(arr, (res) => {
						console.log('切换了', res.data.list.data);
						this.zywdList = res.data.list.data
						this.active = e.detail.index
					})
				}
			},
			// 打开弹出层
			open () {
				this.show = true;
			},
			// 关闭弹出层
			onClose () {
				this.show = false
			},
			// 弹出层选中专业逻辑
			changehandler (e) {
				console.log(e.detail.data);
				let arrs = e.detail.data
				let index = this.list.indexOf(arrs)
				if (index != -1) {
					// console.log('索引', index);
					this.$nextTick(() => {
						let arr = {
							cid: String(arrs.value),
							is_hot: String(arrs.value),
							page: String(this.page),
							keyword: ''
						}
						if (arrs.value == 0) {
							arr.is_hot = String(1)
							getquestionsList(arr, (res) => {
								console.log('切换了', res.data.list);
								this.zywdList =  res.data.list.data
								this.active = e.detail.index
								this.active = index
								this.title = arrs.text
							})
						} else {
							arr.is_hot = String(arrs.value)
							getquestionsList(arr, (res) => {
								console.log('切换了', res.data.list.data);
								this.zywdList = res.data.list.data
								this.active = index
								this.title = arrs.text
							})
						}
						this.onClose()
						
					})
				}
			},
			// 搜索栏逻辑
			confim (e) {
				console.log(e);
				let arr = {
					cid: '0',
					is_hot: '1',
					page: String(this.page),
					keyword: e.value
				}
				getquestionsList(arr, (res) => {
					this.zywdList = res.data.list.data
				})
			},
			// 内容点击事件
			contentHandler (i) {
				console.log(i.id);
				uni.navigateTo({
					url: `/pages/Attorney side/zywdContent/zywdContent?id=${i.id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zywd {
		width: 100vw;
		height: 100vh;
	}
	.zywd-top {
		width: 100vw;
		height: 140px;
		color: white;
		position: relative;
	}
	.zywd-top > image {
		width: 100vw;
		height: 140px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}
	
	.tab-right {
		width: 20px;
		height: 20px;
		position: absolute;
		background-color: white;
		right: 0;
		top: 25%;
		/* 确保按钮在所有内容之上 */
		z-index: 1;
	}
	.tab-right > image {
		width: 20px;
		height: 20px;
	}
	
	::v-deep.van-tabs__line {
		background-color: black !important;
	}

	.Inv1 {
		width: 100vw;
		height: 100%;
		overflow: hidden;
	}
	.Inv1-vw {
		width: 694rpx;
		height: 180rpx;
		margin: 32rpx 0 0 28rpx;
		border-bottom: 2rpx solid #F0F0F0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.Inv1-vw-left {
		display: flex;
		height: 25px;
	}
	.Inv1-vw-left > view {
		width: 23px;
		height: 23px;
		background-color: #1f4c7e;
		border-radius: 50% 50% 50% 20%;
		color: white;
		font-size: 14px;
		text-align: center;
		line-height: 23px;
	}
	.text3 {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #383838;
		margin-left: 10rpx;
	}
	.text4 {
		width: 694rpx;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 32rpx;
		color: #4D4D4D;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;  
		overflow: hidden;
	}
	.Inv1-view {
		display: flex;
		color: #A6A6A6;
		align-items: center;
	}

	.popup-view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup-view > text {
		display: block;
		margin-top: 60rpx;
		font-size: 26rpx;
	}
	.popup-check {
		width: 90vw;
		height: 29vh;
		margin-top: 20rpx;
	}
	::v-deep.checklist-group {
		justify-content: center !important;
	}
	::v-deep.checklist-box.is--tag {
		margin-right: 10rpx !important;
		padding: 10rpx 12rpx !important;
		border-radius: 24rpx !important;
	}
	
	::v-deep.van-cell__value {
		color: black;
	}







</style>
